import React, { useEffect, useRef } from 'react';
import { Form, Col, Row } from 'antd';
import { FormItemUpload, SelectCustom } from 'xuanyue';

const formItemLayout = {
  labelCol: {
    span: 10,
  },
  wrapperCol: {
    span: 14,
  },
};
const formItem2Layout = {
  labelCol: {
    span: 3,
  },
  wrapperCol: {
    span: 21,
  },
};
function Index() {
  const formRef = useRef();
  // 初始化
  useEffect(() => {
    formRef.current.setFieldsValue({
      entryBankId: 1,
      foreignExchangeRefundRecordFileList: [
        {
          fileId: 1,
          fileCode: 1,
          uid: 1,
          name: 'xxxx',
        },
      ],
    });
  }, []);

  return (
    <div style={{ padding: 24 }}>
      <Form {...formItemLayout} ref={formRef}>
        <Row>
          <Col span={6}>
            <Form.Item
              label="入账银行"
              name="entryBankId"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <SelectCustom
                style={{ width: '100%' }}
                optionList={[{ id: 1, name: '银行' }]}
                keyValue={['name', 'id']}
              />
            </Form.Item>
          </Col>
          <Col span={18} style={{ position: 'relative', left: '1%' }}>
            <FormItemUpload
              {...formItem2Layout}
              label="附件"
              name="foreignExchangeRefundRecordFileList"
            />
          </Col>
        </Row>
      </Form>
    </div>
  );
}

export default React.memo(Index);
